<template>
    <div class="page-content">
        <div class="comm-content" ref="box">每月收成</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
    mounted() {
        this.initEcharts()
        this.getData()
        window.addEventListener('resize',this.screen)
        this.screen()
    },
    methods: {
        // 适配屏幕
        screen() {
            this.myEcharts.resize()
            // 计算一个文字大小的比例
            let width = this.$refs.box.offsetWidth
            let num = width / 100 * 6
            let options = {
                title: {
                    textStyle: { // 设置主标题样式
                        fontSize: num
                    }
                }
            }
            // 修改图标样式以后要重绘
            this.myEcharts.setOption(options)
        },
        // 初始化图表
        initEcharts() {
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)

            /** @type EChartsOption */
            let options = {
                title: {
                    text: '全国种植每月收成情况',
                    left: '20',
                    top: '2',
                },
                xAxis: {
                    // data: dataMonth,
                    type: 'category',
                },
                yAxis: {
                    show: true,
                    type: 'value',
                    axisLine: {
                        show: true,
                    },
                },
                tooltip: { //鼠标悬浮提示信息
                    show: true,
                },
                grid: {
                    left: '14%',
                    right: '10%',
                    top: '16%',
                    bottom: '10%',
                },
                toolbox: {  // 工具箱
                    show: true,
                    feature: {
                        saveAsImage: {  // 保存图片
                            type: 'png',
                        },
                        dataView: {
                            show: true,
                        },
                    },
                },
                series: [{
                    type: 'bar',
                    // data: dataNum,
                    label: { // 定义显示数据
                        show: true,
                        position: 'top',
                    },
                    itemStyle: {
                        opacity: 0.8, // 设置柱状的透明度,
                        borderRadius: [50, 50, 0, 0],
                        color: { // 设置柱状的渐变
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x1: 1,
                            y1: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(16,54,90)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(53,190,228)'
                                }

                            ]
                        }

                    },
                }],
            }
            this.myEcharts.setOption(options)
        },
        // 获取数据
        async getData() {
            let dataList = await this.$http('/api/plantingHarvest')
            console.log(dataList);
            let dataMonth = dataList.data.map(item => {
                return item.month
            })
            let dataNum = dataList.data.map(item => {
                return item.harvest
            })
            console.log(dataNum);
            this.setEcharts(dataMonth, dataNum)
        },
        //  绘制图表
        setEcharts(dataMonth, dataNum) {
            let options = {
                xAxis: {
                    data: dataMonth
                },
                series: [
                    {
                        data: dataNum
                    }
                ]
            }
            this.myEcharts.setOption(options)
        }

    }
}
</script>
<style></style>